<template>
  <MarkdownBox class="mt_16" :mdStr="mdStr"></MarkdownBox>
</template>

<script setup>
const mdStr = `   
## 痛点
你还在为了css的box-shadow样式而头疼？
老是记不住繁杂多变的属性？
记住了属性也调不出好看的样式？

## Box Shadow 可视化编辑器

一个基于 Vue 3 + Element Plus 的盒子阴影可视化配置工具，支持实时预览和多层阴影编辑。

## 功能特性

- 🎨 预设 80+ 种精美阴影样式
- ✨ 实时可视化编辑
- 🖱️ 支持多层阴影叠加
- 📋 一键复制 CSS 代码
- 🎯 精确参数控制（偏移/模糊/扩展/透明度）
- 🌈 颜色选择器支持
### 预览
![在这里插入图片描述](https://code-life-1302946402.cos.ap-chongqing.myqcloud.com/cl-component/cl-boxshadow/1.png)
![在这里插入图片描述](https://code-life-1302946402.cos.ap-chongqing.myqcloud.com/cl-component/cl-boxshadow/2.png)


[一键前往git地址，好用希望给点个赞啦](https://github.com/code-life-fjl/boxshadow-case)
[直接前往预览](https://code-life-fjl.github.io/boxshadow-case/)`
</script>
<style lang="scss" scoped>
::v-deep {
  .vditor-toolbar--hide {
    display: none;
  }
}
</style>
